// 测试布局组件

import React from 'react';

const TestLayout: React.FC = () => {
  return (
    <div className="min-h-screen bg-gray-900 text-white p-4">
      <div className="flex justify-between items-center mb-4">
        <h1 className="text-2xl font-bold text-white">软通动力自动驾驶小巴 HMI</h1>
        <span className="px-3 py-1 bg-blue-600 text-white rounded-full text-sm">
          乘客
        </span>
      </div>

      <div className="grid grid-cols-12 gap-4 h-[calc(100vh-120px)]">
        {/* 左侧：3D场景 */}
        <div className="col-span-8">
          <div className="bg-gray-800 rounded-lg p-6 h-full">
            <h3 className="text-lg font-semibold mb-4 text-white">3D场景视图</h3>
            <div className="bg-gray-700 h-[calc(100%-60px)] rounded flex items-center justify-center">
              <p className="text-gray-400">3D场景渲染区域</p>
            </div>
          </div>
        </div>

        {/* 右侧：控制面板 */}
        <div className="col-span-4 space-y-4">
          <div className="bg-gray-800 rounded-lg p-6">
            <h3 className="text-lg font-semibold mb-4 text-white">车辆状态</h3>
            <div className="space-y-3">
              <div className="flex justify-between">
                <span className="text-gray-300">速度：</span>
                <span className="text-white font-medium">45 km/h</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-300">电池：</span>
                <span className="text-white font-medium">85%</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-300">温度：</span>
                <span className="text-white font-medium">22°C</span>
              </div>
            </div>
          </div>

          <div className="bg-gray-800 rounded-lg p-6">
            <h3 className="text-lg font-semibold mb-4 text-white">控制面板</h3>
            <div className="space-y-3">
              <button className="w-full bg-red-600 hover:bg-red-500 text-white py-2 px-4 rounded-lg">
                紧急停车
              </button>
              <button className="w-full bg-blue-600 hover:bg-blue-500 text-white py-2 px-4 rounded-lg">
                紧急呼叫
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* 底部导航栏 */}
      <div className="fixed bottom-4 left-4 right-4">
        <div className="bg-gray-800 rounded-lg p-4">
          <div className="flex justify-center gap-4">
            <button className="bg-blue-600 text-white px-4 py-2 rounded-lg">
              主界面
            </button>
            <button className="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">
              设置
            </button>
            <button className="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">
              紧急控制
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TestLayout;
